<template>
	<!-- 文章详情页面 -->
	<view>
		<view class="post-detail">
			<!-- 文章标题 -->
			<view class="post-detail__title">
				{{ post_detail.title }}
			</view>
			<!-- 文章用户信息 -->
			<view class="post-detail__user" @click="to_personal_info(post_detail.userid)">
				<view class="post-detail__user-info">
					<image class="post-detail__user-left-avatar" :src="post_detail.usertx"></image>
					<view class="post-detail__user-right">
						<view class="post-detail__user-flex">
							<view class="post-list__item-user-name">
								{{ post_detail.nickname }}
								<!-- 循环徽章的展示 -->
								<image class="post-detail__user-left-icon" v-for="(item, index) in post_detail.badge" :key="index" :src="item.icon"></image>
							</view>
							<view class="post-detail__post-time">{{ post_detail.create_time }}</view>
						</view>
						<view class="post-detail__user-action" v-if="login_user_id != post_detail.userid">
							<u-button size="mini" text="已关注" :hairline="false" color="rgba(255, 84, 115, 0.1)" style="color: #ff5473;" v-if="is_follow == 0 || is_follow == 2" @click.native.stop="to_follow_users"></u-button>
							<u-button size="mini" text="关注" :hairline="false" color="rgba(255, 84, 115, 0.1)" style="color: #ff5473;" v-else @click.native.stop="to_follow_users"></u-button>
							<u-button size="mini" text="私信" :hairline="false" color="rgba(41, 151, 247, 0.1)" style="color:#2997f7" @click.native.stop="to_paper_list(post_detail.userid)"></u-button>
						</view>
					</view>
				</view>
				<!-- 展示评论数量访问数量 点赞数量 -->
				<view class="post-detail__user-relative">
					<view class="line-form-line"></view>
					<view class="post-detail__item-right">
						<view class="post-list__item-user-right-item">
							<u-icon name="eye-fill" color="#777" size="15"></u-icon>
							<text class="iconfont iconyanjing"></text>
							<text class="post-list__item-user-right-item-text">
								{{ post_detail.view }}
							</text>
						</view>
						<view class="post-list__item-user-right-item">
							<u-icon name="thumb-up-fill" color="#777" size="15"></u-icon>
							<text class="post-list__item-user-right-item-text">
								{{ post_detail.thumbs }}
							</text>
						</view>
						<view class="post-list__item-user-right-item">
							<u-icon name="more-circle-fill" color="#777" size="15"></u-icon>
							<text class="post-list__item-user-right-item-text">
								{{ post_detail.comment }}
							</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 文章内容 -->
			<view class="post-detail__content">
				<mp-html :content="post_detail.content" v-if="checkHtml(post_detail.content) == 1" />
				<view style="white-space:pre-wrap;" v-else>{{ checkHtml(post_detail.content) }}</view>

				<!-- 循环文章的图片 -->
				<image v-if="!checkImg(post_detail.content)" v-for="(item, index) in post_detail.img_url" :key="index" :src="item" mode="widthFix" style="width: 100%;" @click="previewImage(index, post_detail.img_url)"></image>
			</view>

			<view class="post-detail__zan">
				文章不错？点个赞呗
			</view>

			<!-- 四个标签按钮 -->
			<view class="post-detail__tag">
				<!-- 点赞 -->
				<view class="post-detail__tag-info" @click="to_like_post">
					<u-icon name="thumb-up-fill" color="#4e5358" size="35" v-if="is_thumbs == 1"></u-icon>
					<u-icon name="thumb-up" color="#4e5358" size="35" v-else></u-icon>
					<text class="post-detail__tag-info-text">点赞 {{ post_detail.thumbs }}</text>
				</view>
				<!-- 赞赏 -->
				<view class="post-detail__tag-info" @click="appreciate_show = true">
					<u-icon name="rmb-circle" color="#4e5358" size="35"></u-icon>
					<text class="post-detail__tag-info-text">赞赏 +{{ post_reward }}</text>
				</view>
				<!-- 收藏 -->
				<view class="post-detail__tag-info" @click="to_collection_post">
					<u-icon name="star" color="#4e5358" size="35" v-if="is_collection == 0"></u-icon>
					<u-icon name="star-fill" color="#4e5358" size="35" v-else></u-icon>
					<text class="post-detail__tag-info-text">收藏</text>
				</view>
				<!-- 分享 -->
				<view class="post-detail__tag-info" @click="share_post">
					<u-icon name="share-square" color="#4e5358" size="35"></u-icon>
					<text class="post-detail__tag-info-text">分享</text>
				</view>
			</view>
		</view>
		<!-- 评论列表 -->
		<view class="comment-list">
			<!-- 展示评论的数量 及条件 -->
			<view class="comment-list__title">
				评论 ({{ post_detail.comment }})
			</view>
			<view v-if="comment_list.length > 0">
				<view class="comment-item" v-for="(item, index) in comment_list" :key="index" @click="comment_on_more_actions(item.id, item.userid)">
					<view class="comment-item-left" @click.stop="to_personal_info(item.userid)">
						<image class="comment-item-left-tx" :src="item.usertx"></image>
					</view>
					<view class="comment-item-right">
						<view class="comment-item-right-top">
							<view class="comment-item-right-top-name">
								<text> {{ item.nickname }}</text>
								<!-- 循环展示徽章 -->
								<view class="comment-item-right-top comment-item-right-icon">
									<image class="comment-item-right-icon-info" v-for="(item, index) in item.badge" :key="index" :src="item.icon"></image>
								</view>
								<!-- 昵称 后面加ip地址 -->
								<text class="comment-item-right-top-name-ip"> IP:({{ item.ip_address }})</text>
							</view>
						</view>
						<text class="comment-item-right-top-time">{{ item.time_ago }}</text>
						<!-- 判断是不是回复其他人的内容 -->
						<view class="comment-item-right-replay" v-if="item.parentid != 0">
							<view>回复 {{ item.parentnickname }}</view>
							<view class="comment-item-content">
								<text>{{ item.parentcontent }}</text>
							</view>
						</view>
						<!-- 评论内容 -->
						<view class="comment-item-content">
							<text>{{ item.content }}</text>
						</view>
						<!-- 评论图片 多张 -->
						<view class="comment-item-right-img" v-if="item.image_path.length > 0">
							<u--image :showLoading="true" v-for="(img, key) in item.image_path" :key="key" :src="img" width="80px" height="80px" @click.native.stop="previewImage(key, item.image_path)" radius="10"></u--image>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
			</view>
			<view style="padding-bottom: 40upx;" v-else>
				<u-empty mode="data" text="暂无评论哟，快来发表第一个评论吧！">
				</u-empty>
			</view>
		</view>
		<!-- 发表评论区域 -->
		<view class="post-detail__comment">
			<view class="post-detail__comment-item">
				<view class="post-detail__comment-left" @click="to_post_comments()">
					<view style="color: #999;">请输入评论内容</view>
				</view>
				<view class="post-detail__comment-right" @click="to_like_post">
					<u-icon name="thumb-up-fill" size="25" v-if="is_thumbs == 1"></u-icon>
					<u-icon name="thumb-up" size="25" v-else></u-icon>
				</view>
				<view class="post-detail__comment-right" @click="to_collection_post">
					<u-icon name="star-fill" size="25" v-if="is_collection == 1"></u-icon>
					<u-icon name="star" size="25" v-else></u-icon>
				</view>
				<view class="post-detail__comment-right">
					<u-icon name="more-dot-fill" size="25" @click="ActionSheetShow = true"></u-icon>
				</view>
			</view>
		</view>
		<!-- 弹出评论面板 -->
		<u-popup :show="comment_show" :round="10" :overlay="true" mode="bottom" @close="close_post_commnet">
			<view>
				<!-- 弹出页面的内容 最顶上左边 评论两字  右边发布两字 然后填入评论内容 限免可以选择图片-->
				<view class="post-comment-content">
					<view class="post-comment-content-top">
						<view class="post-comment-content-top-left">
							<text>评论</text>
						</view>
						<view class="post-comment-content-top-right" @click="submit_comment">
							<text>发布</text>
						</view>
					</view>
					<u--textarea v-model="comment_content" placeholder="请输入内容"></u--textarea>
					<view style="margin: 10upx 0;">
						<u-upload :fileList="comment_img" @afterRead="afterRead" @delete="deletePic" :previewFullImage="true" multiple :maxCount="8"></u-upload>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 弹出赞赏面板 -->
		<u-popup :show="appreciate_show" :round="10" :overlay="true" mode="center" @close="appreciate_show = false">
			<view style="width: 700rpx">
				<view class="post-appreciate">
					<view class="post-appreciate__header">
						<u-icon name="rmb-circle" color="#fff" size="35"></u-icon>
						<text class="post-detail__tag-info-text">给作者送糖</text>
					</view>
					<view class="post-appreciate__content">
						<u--input type="number" placeholder="请输入赞赏金额" border="surround" v-model="appreciate_money"></u--input>
						<u-radio-group value="0" placement="row">
							<u-radio label="金币" name="0"></u-radio>
							<u-radio label="积分" name="1"></u-radio>
						</u-radio-group>
						<u-button type="primary" text="确定" @click="reward_posts"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 返回顶部 -->
		<u-back-top :scroll-top="scrollTop" z-index="1000"></u-back-top>
		<!-- 更多操作菜单 -->
		<u-action-sheet :actions="ActionSheetList" :closeOnClickOverlay="true" title="更多操作" :show="ActionSheetShow" @close="ActionSheetShow = false" @select="get_more_operations"></u-action-sheet>
		<u-action-sheet :actions="comment_action_list" :closeOnClickOverlay="true" title="更多操作" :show="CommentShow" @close="closeCommentShow" @select="get_comment_action_operations"></u-action-sheet>
	</view>
</template>

<script>
import mpHtml from '@/components/mp-html/mp-html';
export default {
	components: {
		mpHtml
	},
	data() {
		return {
			post_id: '',
			post_detail: {},
			login_user_id: '', //登录用户id
			comment_list: [],
			comment_show: false, //是否显示评论面板
			comment_content: '', //评论内容
			comment_img: [], //评论图片
			comment_pid: 0, //评论的父级id
			scrollTop: 0,
			is_thumbs: 0, //是否点赞
			is_follow: 0, //是否关注
			is_collection: 0, //是否收藏
			appreciate_show: false, //是否显示赞赏面板
			appreciate_money: '', //赞赏的金额
			appreciate_payment: 0, //赞赏的方式 0 金币 1 积分
			post_reward: 0, //文章赞赏的金额
			formData: {
				limit: 10,  //每页10条数据
				page: 1,   //第几页
			},
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '已经到底了哈',
			ActionSheetShow: false,
			ActionSheetList: [
				{
					type: 0,
					name: '举报帖子'
				}
			],
			is_update_more_operations: true,
			CommentShow: false,
			comment_action_list: [],
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad(options) {
		this.login_user_id = uni.getStorageSync('userid');
		this.post_id = options.id;
		this.get_post_information(options.id);
		this.get_list_comments(options.id);
		this.login_user_id = uni.getStorageSync('userid');
	},
	onReachBottom() {
		this.get_list_comments(this.post_id);
		this.status = 'loading';
	},
	onPullDownRefresh() {
		//调用获取数据方法
		this.get_post_information(this.post_id);
		this.get_list_comments(this.post_id);
		setTimeout(() => {
			//结束下拉刷新
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		//获取文章详情
		get_post_information(id) {
			this.$api.get_post_information({ postid: id }).then((get_post_information) => {
				if (get_post_information.code == 1) {
					console.log(get_post_information.data);
					this.post_detail = get_post_information.data;
					uni.setNavigationBarTitle({
						title: get_post_information.data.section_name
					});
					this.is_thumbs = get_post_information.data.is_thumbs;
					this.is_collection = get_post_information.data.is_collection;
					this.is_follow = get_post_information.data.is_follow;
					this.post_reward = get_post_information.data.reward;
					if (this.is_update_more_operations) {
						if (get_post_information.data.userid == this.login_user_id) {
							this.ActionSheetList.push({
								type: 1,
								name: '编辑帖子'
							});
						}
						if (get_post_information.data.userid == this.login_user_id || get_post_information.data.is_section_moderator == 1) {
							this.ActionSheetList.push({
								type: 2,
								name: '删除帖子'
							});
						}
						if (get_post_information.data.is_section_moderator == 1) {
							this.ActionSheetList.push({
								type: 3,
								name: '置顶/取消置顶'
							});
							this.ActionSheetList.push({
								type: 4,
								name: '精华/取消精华'
							});
							this.ActionSheetList.push({
								type: 5,
								name: '热门/取消热门'
							});
							this.ActionSheetList.push({
								type: 6,
								name: '锁定/取消锁定'
							});
						}
						this.is_update_more_operations = false;
					}
				}
			}).catch((err) => {
				console.log('request fail', err);
			});
		},
		//点击放大的图片
		previewImage(index, urls) {
			console.log(index, urls);
			uni.previewImage({
				current: index,
				urls: urls
			});
		},
		//获取评论列表
		async get_list_comments(id) {
			this.formData.postid = id;
			let get_list_comments = await this.$api.get_list_comments(this.formData);
			if (get_list_comments.code == 1) {
				if (this.formData.page > get_list_comments.data.pagecount) {
					this.status = 'nomore';
				} else {
					if (this.formData.page == 1) {
						this.comment_list = get_list_comments.data.list;
					} else {
						this.comment_list = this.comment_list.concat(get_list_comments.data.list);
					}
					if (this.formData.page == get_list_comments.data.pagecount) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
					this.formData.page++;
				}
			}
		},
		// 关闭评论操作
		closeCommentShow() {
			this.CommentShow = false;
		},
		// 评论菜单操作
		get_comment_action_operations(event) {
			if (event.type == 0) {
				uni.navigateTo({
					url: '/pages/news/report?type=2&id=' + this.comment_pid
				})
			}
			if (event.type == 1) {
				this.to_post_comments(this.comment_pid);
			}
			if (event.type == 2) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该评论吗？',
					success: (res) => {
						if (res.confirm) {
							this.delete_comment();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		// 评论更多操作
		comment_on_more_actions(id, userid) {
			console.log(id, userid);
			this.comment_pid = id;
			this.comment_action_list = [
				{
					type: 0,
					name: '举报评论'
				},
				{
					type: 1,
					name: '回复评论'
				}
			];
			if (this.login_user_id == userid || this.post_detail.is_section_moderator == 1) {
				this.comment_action_list.push({
					type: 2,
					name: '删除评论'
				});
			}
			this.CommentShow = true;
		},
		delete_comment() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.$api.delete_comment({
				commentid: this.comment_pid
			}).then(res => {
				this.comment_list = [];
				this.$u.toast(res.msg);
				this.formData.page = 1;
				this.get_list_comments(this.post_id);
			}).catch((err) => {
				console.log('request fail', err);
			})
		},
		//弹出评论页面
		to_post_comments(pid = 0) {
			if (this.login_user_id == '') {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			this.comment_pid = pid;
			this.comment_show = true;
		},
		//关闭评论页面
		close_post_commnet() {
			this.comment_pid = 0;
			this.comment_show = false;
		},
		// 删除图片
		deletePic(event) {
			this[`comment_img${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`comment_img${event.name}`].length
			lists.map((item) => {
				this[`comment_img${event.name}`].push({
					...item,
				})
			})
		},
		// 上传图片
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.$api.baseUrl + 'upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						appid: this.$api.appid,
						usertoken: uni.getStorageSync('usertoken')
					},
					success: (res) => {
						console.log("上传成功", res);
						setTimeout(() => {
							resolve(JSON.parse(res.data));
						}, 1000)
					}
				});
			})
		},
		//发表评论
		async submit_comment() {
			if (this.comment_content == '') {
				uni.hideLoading();
				this.$u.toast('请输入评论内容');
				return false;
			}
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			//定义一个空数组，用来存放上传图片的路径
			let upload_comment_img = [];
			if (this.comment_img.length > 0) {
				for (let i = 0; i < this.comment_img.length; i++) {
					const result = await this.uploadFilePromise(this.comment_img[i].url)
					if (result.code == 1) {
						upload_comment_img.push(result.data.url);
					}
				}
			}
			if (upload_comment_img.length > 0) {
				//计算出comment_img的长度 和 upload_comment_img的长度 是否一样 如果一样就说明上传成功
				if (this.comment_img.length != upload_comment_img.length) {
					uni.hideLoading();
					this.comment_img = [];
					this.comment_content = '';
					this.$u.toast('评论失败');
					this.close_post_commnet();
				}
				upload_comment_img = upload_comment_img.join(',');
			} else {
				upload_comment_img = '';
			}
			this.$api.post_comment({
				postid: this.post_id,
				content: this.comment_content,
				parentid: this.comment_pid,
				img: upload_comment_img
			}).then(res => {
				uni.hideLoading();
				this.comment_img = [];
				this.comment_content = '';
				this.comment_pid = 0;
				this.formData.page = 1;
				this.get_list_comments(this.post_id);
				this.$u.toast('评论成功');
				this.post_detail.comment++;
				this.close_post_commnet();
			}).catch((err) => {
				uni.hideLoading();
				console.log('request fail', err);
			})
		},
		// 点赞文章
		async to_like_post() {
			if (this.login_user_id == '') {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let to_like_post = await this.$api.like_posts({ postid: this.post_id });
			if (to_like_post.code == 1) {
				this.$u.toast(to_like_post.msg);
				this.post_detail.thumbs = to_like_post.data.thumbs_count;
				this.is_thumbs = this.is_thumbs == 0 ? 1 : 0;
			}
		},
		// 收藏文章
		async to_collection_post() {
			if (this.login_user_id == '') {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let to_collection_post = await this.$api.collection_posts({ postid: this.post_id });
			if (to_collection_post.code == 1) {
				this.$u.toast(to_collection_post.msg);
				this.is_collection = this.is_collection == 0 ? 1 : 0;
			}
		},
		// 赞赏文章
		async reward_posts() {
			if (this.login_user_id == '') {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let reward_posts = await this.$api.reward_posts({
				postid: this.post_id,
				money: this.appreciate_money,
				payment: this.appreciate_payment
			});
			if (reward_posts.code == 1) {
				this.appreciate_show = false;
				//赞赏成功后，将赞赏的金额加到文章的赞赏金额上
				this.post_reward = Number(this.post_reward) + Number(this.appreciate_money);
				this.$u.toast('赞赏成功');
			}
		},
		share_post() {
			uni.shareWithSystem({
				summary: '我正在阅读一篇文章，分享给你看看吧！',
				href: this.post_detail.posturl
			})
		},
		async to_follow_users() {
			if (this.login_user_id == '') {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let follow_users = await this.$api.follow_users({
				followedid: this.post_detail.userid
			});
			if (follow_users.code == 1) {
				this.is_follow = this.is_follow == 0 || this.is_follow == 2 ? 1 : 0;
				this.$u.toast(follow_users.msg);
			}
		},
		to_personal_info(id) {
			uni.navigateTo({
				url: '/pages/member/personal_info?id=' + id
			})
		},
		checkHtml(htmlStr) {
			if (htmlStr !== undefined && htmlStr !== null) {
				var cleanedHtmlStr = htmlStr.replace(/<text>/g, '').replace(/<\/text>/g, '');
				var reg = /<[^>]+>/g;
				if (reg.test(cleanedHtmlStr)) {
					return 1;
				}else{
					return cleanedHtmlStr;
				}
			} else {
				return htmlStr;
			}
		},
		// 判断是否有img标签
		checkImg(htmlStr) {
			var reg = /<img[^>]+>/g;
			return reg.test(htmlStr);
		},
		to_paper_list(userid) {
			uni.navigateTo({
				url: '/pages/paper/paper-list?userid=' + userid
			})
		},
		get_more_operations(event) {
			if (event.type == 0) {
				uni.navigateTo({
					url: '/pages/news/report?type=1&id=' + this.post_id
				})
			}
			// 编辑文章
			if (event.type == 1) {
				uni.navigateTo({
					url: '/pages/news/edit_post?id=' + this.post_id
				})
			}
			if (event.type == 2) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该文章吗？',
					success: (res) => {
						if (res.confirm) {
							this.delete_post();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
			// 置顶/取消置顶
			if (event.type == 3) {
				this.post_status_modification(1, this.post_detail.sticky == 0 ? 1 : 0);
			}
			// 精华/取消精华
			if (event.type == 4) {
				this.post_status_modification(4, this.post_detail.featured == 0 ? 1 : 0);
			}
			// 热门/取消热门
			if (event.type == 5) {
				this.post_status_modification(2, this.post_detail.popular == 0 ? 1 : 0);
			}
			// 锁定/取消锁定
			if (event.type == 6) {
				if (this.post_detail.status == 0 || this.post_detail.status == 2) {
					uni.showToast({
						title: '该文章暂不支持修改状态',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				this.post_status_modification(3, this.post_detail.status == 1 ? 1 : 0);
			}
		},
		// 删除文章
		async delete_post() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let delete_post = await this.$api.delete_post({
				postid: this.post_id
			});
			if (delete_post.code == 1) {
				this.$u.toast(delete_post.msg);
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1000);
			}
		},
		//文章状态修改
		async post_status_modification(type, status) {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let post_status_modification = await this.$api.post_status_modification({
				postid: this.post_id,
				type: type,
				status: status
			});
			if (post_status_modification.code == 1) {
				this.$u.toast(post_status_modification.msg);
			}
		}
	}
}
</script>

<style lang="less">
page {
	background-color: #F9F9F9;
}

.post-detail {
	padding: 20upx;
	padding-bottom: 0;
	background-color: #fff;

	.post-detail__title {
		font-size: 36upx;
		font-weight: bold;
		margin-bottom: 30upx;
		background-color: #fff;
	}

	.post-detail__user {
		display: flex;
		flex-direction: column;
		margin-bottom: 20upx;

		.post-detail__user-info {
			flex: 1;
			display: flex;
		}

		.post-detail__user-left-avatar {
			width: 76upx;
			height: 76upx;
			border-radius: 50%;
			margin-right: 20upx;
			object-fit: cover;
			overflow: hidden;
		}

		.post-detail__user-right {
			flex: 1;
			overflow: hidden;
			justify-content: space-between;
			display: flex;

			.post-detail__user-flex {
				flex: 1;
				overflow: hidden;
				flex-direction: column;
				display: flex;
				justify-content: space-between;

				.post-list__item-user-name {
					font-size: 28upx;
					font-weight: bold;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: flex;
					align-items: center;

					.post-detail__user-left-icon {
						width: 30upx;
						height: 30upx;
						object-fit: cover;
						overflow: hidden;
						backface-visibility: hidden;
						display: inline-block;
						margin-left: 10upx;
					}
				}

				.post-detail__post-time {
					font-size: 24upx;
					color: #999;
				}
			}

			.post-detail__user-action {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.u-button {
					margin-left: 10upx;
				}

			}
		}

		/* 数量展示 */
		.post-detail__user-relative {
			margin-top: 30upx;
			position: relative;

			.line-form-line {
				position: absolute;
				bottom: 0;
				left: 0;
				height: 1px;
				width: 100%;
				transition: .8s;
				background-color: rgba(50, 50, 50, 0.06);
			}

			.post-detail__item-right {
				display: flex;
				align-items: center;
				position: absolute;
				top: -11px;
				background-color: #f5f6f7;
				padding: 2px 6px;
				border-radius: 100px;
				color: #777;
				right: 0;
				margin-right: 20upx;

				.post-list__item-user-right-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 20upx;


					.post-list__item-user-right-item-text {
						font-size: 24upx;
						color: #666;
						margin-left: 10upx;
					}
				}
			}
		}

	}

	/* 文章内容 */
	.post-detail__content {
		margin-top: 35upx;
		font-size: 28upx;
		line-height: 40upx;
		color: #333;
		white-space: pre-wrap;
	}

	.post-detail__zan {
		padding: 30upx;
		font-size: 28upx;
		color: #b1b1b1;
		text-align: center;
	}

	.post-detail__tag {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 20upx 80upx;
		border-top: 1px solid #f5f6f7;
		border-bottom: 1px solid #f5f6f7;
		font-size: 28upx;
		background-color: #fff;

		.post-detail__tag-info {
			flex: 1;
			display: grid;
			justify-items: center;
		}

		.post-detail__tag-info-text {
			font-size: 24upx;
			color: #4e5358;
		}
	}
}

.comment-list {
	padding: 20upx;
	margin-top: 20upx;
	padding-bottom: 0;
	background-color: #fff;
	padding-bottom: 98upx;

	.comment-list__title {
		font-size: 28upx;
		color: #333;
	}

	.comment-item {
		display: flex;
		padding: 30upx 0;
		border-bottom: 1px solid #f5f6f7;

		.comment-item-left {
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			/* overflow: hidden; */

			.comment-item-left-tx {
				width: 100%;
				height: 100%;
			}
		}

		.comment-item-right {
			flex: 1;
			margin-left: 20upx;

			.comment-item-right-top {
				display: flex;
				justify-content: space-between;

				.comment-item-right-top-name {
					font-size: 30upx;
					color: #333;
					display: flex;
					align-items: center;
				}

				.comment-item-right-icon {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.comment-item-right-icon-info {
						width: 30upx;
						height: 30upx;
						object-fit: cover;
						overflow: hidden;
						backface-visibility: hidden;
						display: inline-block;
						margin-left: 10upx;
					}
				}

				.comment-item-right-top-name-ip {
					font-size: 18upx;
					color: #999;
					padding: 6upx 14upx;
					background-color: #e7e7e7;
					border-radius: 4px;
					margin-left: 10upx;
				}
			}

			.comment-item-right-top-time {
				font-size: 24upx;
				color: #999;
			}

			.comment-item-right-replay {
				padding: 10upx 10upx 15upx 20upx;
				font-size: 28upx;
				color: #969696;
				background-color: #F0F0F0;
				border-radius: 10upx;
				margin-bottom: 15upx;

				.comment-item-content {
					margin-top: 20upx;
					font-size: 28upx;
					color: #666666;
				}
			}

			.comment-item-right-icon .comment-item-content {
				margin-top: 10upx;
				font-size: 28upx;
				color: #333;
			}

			.comment-item-right-img {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 10upx;

				.u-image {
					margin-right: 10upx;
					margin-bottom: 10upx;

				}
			}
		}


	}
}

.post-detail__comment {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 20upx 0;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	border-top: 1px solid #f5f6f7;

	.post-detail__comment-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 95%;

		.post-detail__comment-left {
			flex: 1;
			background-color: #f5f6f7;
			border-radius: 100px;
			padding: 10upx 20upx;
			margin-right: 20upx;
			width: 65%;
		}

		.post-detail__comment-right {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 10%;
		}

	}
}

/* 评论页面弹窗 */
.post-comment-content {
	padding: 30upx;
	padding-bottom: 0;
	background-color: #fff;
	margin-bottom: 25upx;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;

	.post-comment-content-top {
		margin-bottom: 15upx;
		display: flex;
		justify-content: space-between;

		.post-comment-content-top-left {
			font-size: 30upx;
			color: #000000;
		}

		.post-comment-content-top-right {
			font-size: 30upx;
			color: rgb(90, 199, 37);
		}
	}
}

/* 赞赏页面 */
.post-appreciate {
	padding-bottom: 0;

	.post-appreciate__header {
		font-size: 30upx;
		width: 100%;
		height: 300upx;
		color: #fff;
		background: linear-gradient(135deg, #59c3fb 10%, #268df7 100%);
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;

		.post-detail__tag-info-text {
			font-size: 35upx;
			color: #fff;
			margin-top: 20upx;
		}
	}

	.post-appreciate__content {
		font-size: 28upx;
		color: #333;

		.u-input {
			margin-bottom: 30upx;
		}

		.u-radio-group {
			display: flex;
			justify-content: space-evenly;
			margin-bottom: 20upx;
		}

		.u-button {
			margin-top: 30upx;
			border-bottom-left-radius: 20upx;
			border-bottom-right-radius: 20upx;
		}
	}
}
</style>
